<template>
  <el-dialog v-model="visible" title="分配角色" :before-close="close">
    <el-form :model="form">
      <el-form-item>
        <el-select v-model="roles" placeholder="请选择角色" multiple>
          <template v-for="role in form.roleLists" :key="role.id">
            <el-option :label="role.name" :value="role.id"/>
          </template>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="updateRole">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref, watch} from 'vue'
import {updateAdminRoleApi} from '../../../../request/api'

const props = defineProps<{
  visible: boolean
  form: AdminRoleFormData
  userId: number
}>()

const roles = ref<number[]>([])

const emit = defineEmits<{
  (event: 'close'): void
}>()

watch(() => props.form.userRoles, () => {
  roles.value = props.form.userRoles.map(item => item.id)
})

const close = () => {
  emit('close')
}

const updateRole = () => {
  updateAdminRoleApi({adminId: props.form.adminId, roleIds: roles.value}).then(res =>{
    if (res.code === 200){
      close();
    }
  })
}


</script>

<style lang="less" scoped>

</style>
